<template>
	<div class="layout">
		<div class="trainNoticeDetail">
			<div style="display: flex; justify-content: space-between; margin-top: 20px">
				<Breadcrumb class="breadcrumb" :crumbs="crumbs"></Breadcrumb>
				<!-- <div class="backBtn" @click="goBack()">返回列表</div> -->
			</div>
			<!-- <div class="topDiv">
				<div class="msgDiv">{{notice.title}}</div>
				<div class="sendBtn" @click="toSignUp" v-if="notice.isApply == 0">立即报名</div>
				<el-button type="info" plain disabled v-else>已报名</el-button>
			</div> -->
      <ContainerTitle text="培训基本信息"></ContainerTitle>
			<div class="tableDiv" v-loading="loading">
                <div class="rowDiv">
                    <div style="width: 50%; display: flex; justify-content: left">
                        <div class="keyDiv">培训时间</div>
                        <div class="valueDiv">
							<span v-if="notice.beginDate">{{ notice.trainBeginTime }} 至 {{ notice.trainEndTime }}</span>
							<span v-else>无</span>
						</div>
                    </div>
                    <div style="width: 50%; display: flex; justify-content: left">
                        <div class="keyDiv">报名时间</div>
                        <div class="valueDiv">
							<span v-if="notice.beginDate">{{ notice.beginDate }} 至 {{ notice.endDate }}</span>
							<span v-else>无</span>
						</div>
                    </div>
                </div>
                <div class="rowDiv">
                    <div style="width: 50%; display: flex; justify-content: left">
                        <div class="keyDiv">类型</div>
                        <div class="valueDiv" v-if="notice.type == 2">公开</div>
                        <div class="valueDiv" v-else-if="notice.type == 1">指定</div>
                        <!-- <div class="valueDiv" v-else="notice.type == 1">无</div> -->
                    </div>
                    <div style="width: 50%; display: flex; justify-content: left">
                        <div class="keyDiv">培训方式</div>
                        <div class="valueDiv">{{notice.modeName}}</div>
                    </div>
                </div>
                <div class="rowDiv">
                    <div style="width: 50%; display: flex; justify-content: left">
                        <div class="keyDiv">主办单位</div>
                        <div class="valueDiv">{{notice.organizerName}}</div>
                    </div>
                    <div style="width: 50%; display: flex; justify-content: left">
                        <div class="keyDiv">培训地址</div>
                        <div class="valueDiv">{{notice.address}}</div>
                    </div>
                </div>
			</div>
      <ContainerTitle text="培训内容"></ContainerTitle>
			<div class="tableDiv desc" v-loading="loading" v-html="msgContent">
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ notice.content ? notice.content.replace(/<[^<>]+>/g, "") : '无' }}
			</div>
		</div>
    <Buttons :buttons="buttons" @goBack="goBack" @toSignUp="toSignUp"></Buttons>
	</div>
</template>

<script>
	import Breadcrumb from '@/components/breadcrumb'
	import { request, uploadFile } from '@/utils/request.js'
  import config from '@/utils/config.js'
  import { getTrainNoticeDetail } from '@/common/api/training'
	export default {
		name: "trainNoticeDetail",
		meta:{
			name: '培训通知详情页'
		},
		components: { Breadcrumb},
    computed:{
      buttons(){
        let btns = [{text:"返回",type:"normal",size:"l",method:"goBack"}];
        if(this.notice.isApply == 0){
          btns.push({text:"立即报名",type:"success",size:"l",method:"toSignUp"})
        }else {
          btns.push({text:"已报名",type:"success",size:"l",method:"none",disabled:"true"})
        }
        return btns
      }
    },
		data() {
			return {
				// v-html里的内容
				msgContent:"",
				crumbs: [
					{label: '培训中心',value: 'help'}, 
					{label: '企业培训通知',value: 'trainingNotice'},
					{label: '企业培训报名页',value: 'trainNoticeDetail',choose: true}
				],
				notice: {},
				loading: false //加载状态
			}
		},
		mounted(){
			this.loading = true;
			this.getTrainNoticeDetail();
		},
		activated(){
			this.loading = true;
			this.getTrainNoticeDetail();	
		},
		methods: {
			// 获取培训通知详情
			async getTrainNoticeDetail() {
        let id = this.$route.query.id
				const { code, msg, data} = await getTrainNoticeDetail(id)
				// console.log(data.content);
				data.content = data.content.replace(/<img /g,"<img style='max-width:100%;height:auto'")
				this.msgContent = data.content
				this.loading = false;
				if(code != '200') return this.$message.warning(msg);
				this.notice = data;
			},
      // 点击立即报名按钮
			toSignUp(id) {
				this.$CheckRole("培训活动报名", async () => {
					let formData = new FormData();
					formData.append('id', this.$route.query.id);
					const { code, msg } = await uploadFile(this, config.api.signUpTrainNotice, formData, 'POST');
					if(code != '200') return this.$message.warning(msg);
					this.$message.success('申请报名成功，请您准时参加培训！');
					this.getTrainNoticeList(); //更新列表数据（立即报名按钮变成已报名）
				})
      },
			goBack() {
				this.$router.go(-1);
				// this.$router.push({ path: 'trainingNotice' });
			}
		}
	}
</script>

<style scoped>

	.footer {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.trainNoticeDetail {
		width: 1000px;
		margin: 0 auto;
	}

	.trainNoticeDetail .backBtn {
		border: 1px solid #eeeeee;
		white-space: nowrap;
		font-size: 12px;
		height: 30px;
		width: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 3px;
	}

	.trainNoticeDetail .backBtn:hover {
		cursor: pointer;
		box-shadow: 0px 0px 5px #EEEEEE;
	}

	.trainNoticeDetail .topDiv {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
	}

	.trainNoticeDetail .topDiv .msgDiv {
		font-size: 24px;
		font-weight: bold;
		text-align: left;
		width: 80%;
	}

	.trainNoticeDetail .topDiv .sendBtn {
		padding: 10px 30px;
		background-color: #045db9;
		color: #ffffff;
		font-size: 15px;
		border-radius: 3px;
		transition: all 0.2s ease 0s;
	}

	.trainNoticeDetail .topDiv .sendBtn:hover {
		cursor: pointer;
		box-shadow: 0px 0px 10px #EEEEEE;
	}

	.trainNoticeDetail .title {
		font-size: 20px;
		font-weight: bold;
		text-align: left;
		color: #045db9;
		border-bottom: 2px solid #045db9;
		padding: 10px 10px 10px 0;
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.trainNoticeDetail .tableDiv {
		border: 1px solid #eeeeee;
		color: #666666;
	}

	.trainNoticeDetail .tableDiv.desc {
		border: 1px solid #eeeeee;
		color: #666666;
		padding: 20px;
		font-size: 14px;
		text-align: left;
		margin-bottom: 38px;
	}

	.trainNoticeDetail .tableDiv .rowDiv {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eeeeee;
		font-size: 13px;
	}

	.trainNoticeDetail .tableDiv .rowDiv .keyDiv {
		text-align: left;
		background-color: #f4f4f4;
		padding: 10px;
		width: 110px;
	}

	.trainNoticeDetail .tableDiv .rowDiv .valueDiv {
		text-align: left;
		padding: 10px;
		width: 349px;
	}
	/* .btnDiv {
		display: flex;
		justify-content: left;
		margin: 0 auto 30px auto;
	}

	.btnDiv div {
		background-color: #f1f2f4;
		color: #045db9;
		width: 100px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 15px;
		border-radius: 5px;
		margin-right: 20px;
		transition: all 0.2s ease 0s;
	}

	.btnDiv .btn {
		width: 100px;
		height: 40px;
		line-height: 40px;
		padding: 0;
		text-align: center;
	}

	.btnDiv div:hover {
		box-shadow: 0px 3px 5px #e1e1e1;
		cursor: pointer;
	} */
</style>
